<template>
	<div style="display: flex; justify-content: space-evenly">
		<div>
			<el-form
				:model="salesMen"
				:rules="rules"
				ref="ruleForm"
				label-width="100 px"
				class="demo-ruleForm"
				style="width: 400px; margin: 0 auto"
			>
				<el-form-item label="销售员姓名" prop="name">
					<el-input v-model="salesMen.name"></el-input>
				</el-form-item>
				<el-form-item label="销售员账号" prop="account">
					<el-input v-model="salesMen.account"></el-input>
				</el-form-item>
				<el-form-item label="销售员密码" prop="password">
					<el-input
						v-model="salesMen.password"
						show-password
					></el-input>
				</el-form-item>
				<el-form-item label="年龄" prop="age">
					<el-input v-model.number="salesMen.age"></el-input>
				</el-form-item>

				<el-form-item label="销售员性别" prop="gender">
					<el-radio-group v-model="salesMen.gender">
						<el-radio label="男"></el-radio>
						<el-radio label="女"></el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="addSalesMen(salesMen)"
						>立即添加</el-button
					>

					<el-button @click="resetForm('ruleForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div id="uploadImg">
			<el-upload
				style="margin-top: 80px"
				class="avatar-uploader"
				action="http://localhost:3000/images/uploadImages"
				:show-file-list="false"
				:on-success="handleAvatarSuccess"
			>
				<img v-if="imageUrl" :src="imageUrl" class="avatar" />
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
		</div>
	</div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";

const { mapActions, mapState } = createNamespacedHelpers("salesMen");

export default {
	created() {},
	data() {
		return {
			imageUrl: "",
			salesMen: {
				name: "",
				age: "",
				gender: "",
				images: "",
			},
			ruleForm: {
				name: "",
				region: "",
				date1: "",
				date2: "",
				delivery: false,
				type: [],
				resource: "",
				desc: "",
			},
			rules: {
				name: [
					{
						required: true,
						message: "请输入销售员姓名",
						trigger: "blur",
					},
					{
						min: 1,
						max: 4,
						message: "长度在 1 到 4 个字符",
						trigger: "blur",
					},
				],
				age: [
					{
						required: true,
						message: "请选择销售员年龄",
						trigger: "change",
					},
				],
				gender: [
					{
						required: true,
						message: "请选择销售员性别",
						trigger: "change",
					},
				],
			},
		};
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					alert("submit!");
				} else {
					console.log("error submit!!");
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},

		handleAvatarSuccess(res, file) {
			//图片上传成功之后
			this.salesMen.images = res.data;
			this.imageUrl = "http://localhost:3000/temp/" + res.data;
		},

		...mapActions(["addSalesMen"]),
	},
};
</script>

<style>
#uploadImg {
	margin-top: -50px;
	margin-left: -40px;
}
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>
